import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { Button } from 'antd';
import { WeaLocaleProvider, WeaSearchGroup, WeaMoreButton } from 'ecCom';
import { RenderForm } from '../util';

const getLabel = WeaLocaleProvider.getLabel;

@inject('settingStore')
@observer
class Conventional extends Component {
  static defaultProps = {
    prefixCls: 'email-setting-conventional',
  };

  componentWillMount() {
    const {
      settingStore: { conventionalStore, setStoreState },
    } = this.props;
    const {
      getEmailSettingCondition,
      operateUserEmailSetting,
    } = conventionalStore;
    let rightMenuDatas = [
      {
        key: 'save',
        icon: <i className="icon-coms-common" />,
        content: getLabel(30986, '保存'),
        onClick: () => operateUserEmailSetting(),
      },
    ];
    setStoreState({ rightMenuDatas });
    getEmailSettingCondition();
  }

  componentWillUnmount() {
    const {
      settingStore: { conventionalStore },
    } = this.props;
    conventionalStore.clear();
  }

  getForm = (form, fields) => {
    const { isFormInit } = form;
    let group = [];
    isFormInit &&
      fields &&
      fields.map((c) => {
        let items = [];
        c.items.map((field) => {
          if (field.domkey[0] === 'emlsavedays') {
            items.push({
              com: RenderForm(
                form,
                field,
                '',
                <span className="emlsavedays">{getLabel(1925, '天')}</span>,
              ),
            });
          } else if (field.domkey[0] === 'fontsize') {
            items.push({
              com: RenderForm(
                form,
                field,
                '',
                <span
                  className="example"
                  style={{ fontSize: form.getFormParams().fontsize }}
                >
                  {getLabel(125544, '例：字体大小')}
                </span>,
              ),
            });
          } else if (field.domkey[0] === 'saveInterval') {
            if (form.getFormParams().autoSave * 1 !== 0) {
              // 自动存草稿控制显隐
              items.push({
                com: RenderForm(
                  form,
                  { ...field, fieldcol: 12 },
                  '',
                  <span className="emlsavedays">{getLabel(15049, '分钟')}</span>,
                ),
              });
            }
          } else {
            items.push({ com: RenderForm(form, field) });
          }
        });
        group.push(
          <WeaSearchGroup
            ecId={`${
              (this && this.props && this.props.ecId) || ''
            }_WeaSearchGroup@5le0sb@${c.title}`}
            col={1}
            title={c.title}
            needTigger={true}
            showGroup={c.defaultshow}
            items={items}
          />,
        );
      });
    return group;
  };

  render() {
    const {
      prefixCls,
      settingStore: { conventionalStore },
    } = this.props;
    const {
      conventionalForm,
      fields,
      operateUserEmailSetting,
    } = conventionalStore;
    return (
      <div className={prefixCls}>
        <div className={`${prefixCls}-form`}>
          {this.getForm(conventionalForm, fields)}
        </div>
        <div className={`${prefixCls}-operate`}>
          <Button
            ecId={`${
              (this && this.props && this.props.ecId) || ''
            }_Button@4l89j2`}
            type="primary"
            onClick={operateUserEmailSetting}
          >
            {getLabel(30986, '保存')}
          </Button>
          <WeaMoreButton
            ecId={`${
              (this && this.props && this.props.ecId) || ''
            }_WeaMoreButton@tsgqfn`}
          />
        </div>
      </div>
    );
  }
}

export default Conventional;
